<template>
    <div>
        <div
            style="
                padding-left: 5px;
                width: 100%;
                height: 30px;
                font-size: 15px;
                color: #fff;
                line-height: 30px;
                background-color: #4070a2;
            "
        >
            快速检索
        </div>
        <div>
            <div style="margin-top: 15px; margin-bottom: 15px">
                <el-input placeholder="请输入检索的关键字" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </div>
        <div
            style="
                padding-left: 5px;
                width: 100%;
                height: 30px;
                font-size: 15px;
                color: #fff;
                line-height: 30px;
                background-color: #4070a2;
            "
        >
            模板选择
        </div>
        <div class="templateChoose">
            <el-table
  :data="projectData"
  style="width: 100%; height: 100%; overflow: auto"
  @row-click="handleRowClick"
  border
>
  <el-table-column label="方案列表" prop="name" width="400"></el-table-column>
  <!-- 自定义操作列 -->
  <el-table-column label="操作" width="100">
    <template v-slot="scope">
      <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>
        </div>
        <div
            style="
                padding-left: 5px;
                width: 100%;
                height: 30px;
                font-size: 15px;
                color: #fff;
                line-height: 30px;
                background-color: #4070a2;
                margin: 0.5rem 0;
            "
        >
            模板备注
        </div>
        <textarea
            v-model="textAreaValue"
            name=""
            id=""
            rows="5"
            style="width: 100%; resize: vertical; outline: none; font-size: 1.2rem"
        ></textarea>
        <div class="btnGroup">
            <el-button
                type="primary"
                icon="el-icon-check"
                plain
                style="margin-right: 7px"
                @click="executeProject"
            >
                应用
            </el-button>
            <el-button
                type="primary"
                icon="el-icon-refresh-right"
                plain
                style="margin-right: 7px"
                @click="refreshProject"
            >
                刷新
            </el-button>
        </div>
    </div>
</template>
<script>
import {
    getProject,
    saveProject,
    deleteProject,
    updateProject,
    filterKeywordsByWater
} from '@/api/EquipmentManagement.js';
export default {
    data() {
        return {
            textAreaValue: '这里是默认值',
            projectData: [
                { name: '方案一', remark: '这是方案一的备注' },
                { name: '方案二', remark: '这是方案二的备注' },
                { name: '方案三', remark: '这是方案三的备注' },
            ],
            clickPoint:[],
            waterKeyWords:[],
        };
    },
    methods: {
        refreshProject() {
            getProject().then(res => {
                this.projectData = res.data;
                console.log(res.data, '方案列表');
            });
        },
       async handleRowClick(row, column, event) {
            this.textAreaValue = row.remark;
            // console.log(row, column, event);
            this.waterKeyWords=JSON.parse(row.keywordsList);
            this.clickPoint = JSON.parse(row.constructionSite); // 解析 JSON 数据
            await filterKeywordsByWater({keywordsList:this.waterKeywords}).then((res) => {
            if(res.data){
            this.calResultData.impactUser=res.data.length;
            this.$store.commit('setImpactUserList',res.data);
          }else{
            this.calResultData.impactUser=0;
            this.$store.commit('setImpactUserList',[]);
          }
        })
            const parsedPoints = JSON.parse(row.closeValvePointUp);

            // 使用 Set 存储唯一的坐标对
            const uniquePointsSet = new Set(parsedPoints.map(point => JSON.stringify(point)));

            // 将 Set 转换回数组
            this.clickValvePoint = Array.from(uniquePointsSet).map(point => JSON.parse(point));
            const parsedPoints2 = JSON.parse(row.closeValvePointDown);

            // 使用 Set 存储唯一的坐标对
            const uniquePointsSet2 = new Set(parsedPoints2.map(point => JSON.stringify(point)));

            // 将 Set 转换回数组
            this.clickValvePoint2 = Array.from(uniquePointsSet2).map(point => JSON.parse(point));
            const parsedSecondPoints = JSON.parse(row.secondCloseValvePoint);

// 使用 Set 存储唯一的坐标对
const uniqueSecondPoints = new Set(parsedSecondPoints.map(point => JSON.stringify(point)));

// 将 Set 转换回数组
this.secondAnalysisPoint= Array.from(uniqueSecondPoints ).map(point => JSON.parse(point));
            this.pipeAnalysisLine = JSON.parse(row.closeValveLine);
        },
        handleDelete(row) {
            console.log(row,'想要删除的列')
            deleteProject({id:row.id}).then(res=>{
                this.$message({
            showClose: true,
            message: res.message,
            type: "success",
          });
            })
            getProject().then(res => {
            this.projectData = res.data;
            console.log(res.data, '方案列表');
        });
        },
        executeProject() {
            this.tapMap.marker.addMarker(
                this.clickPoint[0],
                this.clickPoint[1],
                this.pointLayer,
                {
                    text: {
                        font: 'normal 13px 微软雅黑',
                        name: `施工点`,
                        fillColor: '#fff',
                        strokeColor: '#000',
                        strokeWidth: 2,
                        offsetY: 0,
                    },
                    scale: 1.5, //大小
                    radius: 10,
                    pBorderColor: '#000000',
                    pBorderWidth: 2,
                    pFillColor: 'green',
                },
                '',
                `施工点`
            );

            // 遍历 this.clickValvePoint 数组，逐个添加标记
            for (let i = 0; i < this.clickValvePoint.length; i++) {
                // 获取当前点的坐标
                const [x, y] = this.clickValvePoint[i];

                // 添加标记
                this.tapMap.marker.addMarker(
                    x, // x 坐标
                    y, // y 坐标
                    this.pointLayer, // 图层
                    {
                        text: {
                            font: 'normal 10px 微软雅黑',
                            name: i + 1 + '', // 标记编号，从 1 开始
                            fillColor: '#fff',
                            strokeColor: '#000',
                            strokeWidth: 2,
                            offsetY: 0,
                        },
                        scale: 1.5, // 大小
                        radius: 10,
                        pBorderColor: '#000000',
                        pBorderWidth: 1,
                        pFillColor: 'pink',
                    },
                    '', // 其他参数（根据你的需求填写）
                    `${i + 1}` // 标记的文本内容（编号）
                );
            }
             // 遍历 this.clickValvePoint 数组，逐个添加标记
             for (let i = 0; i < this.clickValvePoint2.length; i++) {
                // 获取当前点的坐标
                const [x, y] = this.clickValvePoint2[i];

                // 添加标记
                this.tapMap.marker.addMarker(
                    x, // x 坐标
                    y, // y 坐标
                    this.pointLayer, // 图层
                    {
                        text: {
                            font: 'normal 10px 微软雅黑',
                            name: this.clickValvePoint.length+i + 1 + '', // 标记编号，从 1 开始
                            fillColor: '#fff',
                            strokeColor: '#000',
                            strokeWidth: 2,
                            offsetY: 0,
                        },
                        scale: 1.5, // 大小
                        radius: 10,
                        pBorderColor: '#000000',
                        pBorderWidth: 1,
                        pFillColor: 'pink',
                    },
                    '', // 其他参数（根据你的需求填写）
                    `${i + 1}` // 标记的文本内容（编号）
                );
            }
            this.secondAnalysisPoint.forEach(item => {
                this.tapMap.marker.addMarker(
                    item[0],
                    item[1],
                    this.pointLayer,
                    {
                        text: {
                            font: 'normal 13px 微软雅黑',
                            name: '二次关阀点',
                            fillColor: '#fff',
                            strokeColor: '#000',
                            strokeWidth: 2,
                            offsetY: 15,
                        },
                        scale: 1.5, //大小
                        radius: 10,
                        pBorderColor: 'rgba(255, 255, 255, 0)',
                        pBorderWidth: 2,
                        pFillColor: 'rgba(255, 255, 255, 0)',
                    },
                    '',
                    `施工点`
                );
            });
            this.pipeAnalysisLine.forEach(item => {
                console.log(item, 'item[0]加线');
                this.tapMap.marker.addLineString(
                    item[0],
                    item[1],
                    this.lineLayer,
                    {
                        color: '#FF0000', // 红色
                        width: 8,
                    },
                    '',
                    ''
                );
            });
        },
    },
    mounted() {
        getProject().then(res => {
            this.projectData = res.data;
            console.log(res.data, '方案列表');
        });
        setTimeout(() => {
            this.tapMap = this.$store.getters.Map;

            this.pointLayer = this.tapMap.layer.createVectorLayer('施工点图层', {}, 3);
            this.lineLayer = this.tapMap.layer.createVectorLayer('停水线段图层', {}, 2);
        }, 1000); // 延迟 1000 毫秒（1秒）后执行
    },
    components: {},
};
</script>
<style scoped>
.templateChoose {
    width: 100%;
    height: 15rem;
    background: #fff;

    overflow-y: auto;

    .item {
        height: 15%;
        color: #000;
        display: flex;
        span {
            font-size: 1.2rem;
            width: 95%;
            text-align: left;
        }
        .closebtn {
            cursor: pointer;
            width: 5%;
            font-size: 1.3rem;
            font-weight: 800;
        }
        .closebtn:hover {
            color: #4998f2;
        }
    }
    .item:hover {
        background-color: #ebebeb;
    }
}
.btnGroup {
    display: flex;
    justify-content: flex-end;
}
</style>
